<template>
  <div class="topic-list">

    <section v-for="topic in topicList" class="topic-list-item">
      <router-link :to="'/topic/'+topic.id+'.html'" class="topic-title">
        {{topic.title}}
      </router-link>
      <div class="topic-info">
        <div class="user_avatar">
          <img class="block" :src="topic.author.avatar_url" alt="">
        </div>
        <p>
          <span>{{topic.create_at}}</span>
          <span class="reply-count">
            <span class="replie-count">{{topic.reply_count}}</span>
            <span>/</span>
            <span class="visit-count">{{topic.visit_count}}</span>
          </span>
        </p>
        <p>
          <span>{{topic.author.loginname}}</span>
          <span class="last-reply">
            <span class="last-reply-time">{{getTimeInterval(topic.last_reply_at)}}</span>
          </span>
        </p>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    name: "TopicList",
    data() {
      return {
        topicList: [],
        tab:'All',
        loading:true
      }
    },
    methods: {
      getList() {
        this.$http.get('https://cnodejs.org/api/v1/topics?tab=' + this.tab.toLowerCase()).then(response => {
          this.topicList = response.body.data;
        }, response => {
          console.log('error');
        });
      },
      getDate(str) {
        var date = new Date(str);
        return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " "
          + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
      },
      getTimeInterval(timeStr){
        var date = Date.parse(timeStr);
        var minute=((new Date().getTime()/1000-date/1000)/60).toFixed(0);
        if (minute<60)
          return minute+"分钟前";
        else if (minute/60<24)
          return (minute/60).toFixed(0)+"小时前";
        else if (minute/1440<30)
          return (minute/1440).toFixed(0)+"天前";
        else if (minute/43200<12)
          return (minute/43200).toFixed(0)+"月前";
        else
          return (minute/518400).toFixed(0)+"年前";
      }
    },
    created() {
      if (this.$route.params.tab) {
        this.tab=this.$route.params.tab;
        this.$emit('changeTab',this.tab);
      }
      this.getList();
      document.title = 'CNode:Node.js专业中文社区';
    },
    watch: {
      '$route'(to) {
        this.topicList = [];
        if (!to.params.tab)
          this.tab='All';
        else
          this.tab=to.params.tab;
        this.getList();
      }
    }
  }
</script>

<style lang="less" scoped>
  .topic-list {
    .topic-list-item {
      padding: 15px;
      border-bottom: 1px solid #CCC;
      line-height: 20px;
      width: 100%;
      box-sizing: border-box;
      .topic-info {
        font-size: 12px;
        color: #778087;
        & > p {

          margin-left: 50px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .user_avatar {
    float: left;
    width: 40px;
    height: 40px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }

  .user_avatar img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
  }

  .reply-count {
    display: inline-block;

    font-weight: 600;
    .visit-count {
      color: #b4b4b4;

    }

    .replie-count {
      color: #9e78c0;
    }
  }

  .topic-title {
    display: inline-block;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    vertical-align: bottom;
    margin-bottom: 10px;
    &:hover {
      text-decoration: underline;
    }
  }

  .last-reply {
    float: right;
    box-sizing: border-box;
    padding: 6px 0;
    line-height: 18px;
    .user_avatar {
      width: 18px;
      height: 18px;
    }
    .last-reply-time {
      font-size: 14px;

      min-width: 50px;
      margin-left: 10px;
    }
  }
</style>
